<template>
	<view class="content">
    <view class="check">
      <view class="gft-head">
        <view class="gft-name">赣服通</view>
        <p>欢迎使用大厅排队实况查询服务</p>
      </view>

      <view class="uni-list">
        <view class="uni-list-cell">
          <view class="uni-list-cell-left">
            大厅选择
          </view>
          <view class="uni-list-cell-db">
            <picker @change="bindPickerChange" @cancel="chance()" :value="array[index]" :range="array">
              <view v-if="!hasDate" class="noDateBlock" @click="hasDate=!hasDate">请选择大厅</view>
              <view v-else class="uni-input">{{array[index]}}</view>
            </picker>
          </view>
        </view>
        <button @click="submit()">开始查询</button>
      </view>
    </view>

    <Personal v-if="data.names" :personalData="data"></Personal>
    <p>本服务由全南县行政审批局单位提供</p>
	</view>


</template>

<script>
	import Personal from "../common/personal/Personal";
  export default {
    components: {Personal},
    data() {
			return {
        title: 'picker',
        array: [],
        numData: [],
        data: {},
        index: 0,
        time: '12:01',
        hasDate: false,
        hasChange: false,
        lobby: ''
			}
		},
		onLoad() {
      this.getData()
		},
		methods: {
      bindPickerChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.target.value)
        if (!e.target.value) {
          this.index = 0
        }else {
          this.index = e.target.value
        }

        this.hasChange = true
        // this.lobby = this.array[e.target.value]
        console.log(this.lobby);
      },
      chance() {
        if (this.hasChange === false) {
          this.hasDate = !this.hasDate
        }
      },
      getData() {
        let nowDate = new Date();
        let year = nowDate.getFullYear();
        let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
            : nowDate.getMonth() + 1;
        let day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
            .getDate();
        let dateStr = year + "-" + month + "-" + day;
        if(dateStr){
          uni.request({
            url: 'http://61.180.67.178:8900/zndt-v3//api/getHallQueue',
            method: 'POST',
            header: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
            data: {
              nowTime: dateStr
            },
            success: res => {
              console.log(res.data.data)
              let data = res.data.data
              for(let i in res.data.data) {
                this.numData[i] = data[i]
                this.array[i] = data[i].names
              }
            },
            fail: err => {
              uni.showToast({
                title: '数据请求失败',
                duration: 2000,
                icon: 'none'
              })
              console.log(err);
            }
          })
        }
      },
      submit() {
        if(this.hasChange === false) {
          uni.showToast({
            title: '请选择大厅',
            duration: 2000,
            icon: 'none'
          })
        } else {
          this.data = this.numData[this.index]
        }
      }
		},
    mounted() {
    }
	}
</script>

<style>
.content {
  box-shadow: 0 2px 10px rgba(153,153,153,0.2);
  padding-bottom: 0.3rem;
}
.check {
  background: #FFFFFF;
}
  .gft-head {
    padding: .93617rem .638298rem;
    background: #188eee;
    color: #fff
  }

  .gft-name {
    height: 2rem;
    line-height: 2rem;
    padding-left: 2.2rem;
    background: url("") no-repeat;
    background-size: 2rem 2rem;
    font-size: 1rem
  }

  .gft-head p {
    line-height: 1.8rem;
    font-size: .9rem;
  }
  .uni-list-cell {
    display: flex;
    display: -webkit-flex;
    line-height: 3.5rem;
    border-bottom: 1px solid #e7e7e7;
    padding: 0 1rem;
  }
  .uni-list-cell-db {
    margin-left: 1rem;
    padding-right: 1rem;
    flex: 1;
    text-align: right;
  }
  .uni-list button {
    margin: 1rem 2rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 1rem;
    background: #50a4ff;
    color: #FFFFFF;
  }
  .content>p {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 3rem;
    left: 0;
    font-size: 14px;
    color: #999999;
  }
</style>
